<template>
  <div id="app">
    <div id="head">
      <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      用能概述
    </div>
    <div v-if="showDiv" style="margin-top: 10px; padding: 10px;">
      <div>
        <van-button
            v-for="(item, index) in buttons"
            :key="index"
            :type="activeIndex === index? 'info' : 'default'"
            @click="handleClick(index)"
            v-model="form.energyType">
          {{item}}
        </van-button>
      </div>
      <div>
        <van-dropdown-menu style="width:150px;margin: auto;" >
          <van-dropdown-item v-model="form.regionId" :options="regionOptions" @change="findList" />
        </van-dropdown-menu>
      </div>
      <div  style="position: absolute;top:180px;left: 20px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        近六个月用能环比
      </div>
      <div  style="position: absolute;top:560px;left: 20px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        近六个月用能同比
      </div>
      <div  style="position: absolute;top: 960px;left: 20px">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        用能趋势
      </div>
    </div>


    <div ref="echartsRef" style="width: 360px; height: 400px;"></div>

    <div ref="echartsRef2" style="width: 360px; height: 400px;"></div>

    <div ref="echartsRef3" style="width: 360px; height: 400px;"></div>


  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  data(){
    return{
      form:{
        energyType:"电",
        regionId: 1,
      },
      showDiv: false,
      region:[],
      currentUsage:[100,140,230,100,130,183],
      ringResults:[150,100,200,140,100,118],
      withUsage:[100,140,230,100,130,148],
      withResults:[80,50,70,140,100,223],
      todayUsage:[10,20,30,40,23,45,56,66],
      yesterdayUsage:[23,34,56,67,78,89,90,78],
      joint:[],
      timeType:"日",
      pojo:{},
      buttons: ['电', '水', '燃气'],
      activeIndex: 0,
      regionOptions: [
        { text: '浙大森林A栋', value: 1 },
        { text: '浙大森林B栋', value: 2 },
        { text: '浙大森林C栋', value: 3 },
      ]
    }
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
      this.form.energyType = this.buttons[index];
      this.findList();
    },
    findJointList() {
      this.pojo.energyType = this.form.energyType;
      this.pojo.regionId = this.form.regionId;
      this.pojo.timeType = this.timeType;
      axios.post("http://localhost:9999/usageTrend/findJoint", this.pojo).then(res => {
        this.joint = [];
        this.joint = res.data;
        this.initChart3();
      })
    },
    findYesterdayUsage() {
      this.pojo.energyType = this.form.energyType;
      this.pojo.regionId = this.form.regionId;
      this.pojo.timeType = this.timeType;
      axios.post("http://localhost:9999/usageTrend/findUsageYesterday", this.pojo).then(res => {
        this.yesterdayUsage = [];
        this.yesterdayUsage = res.data;
        this.initChart3();
      })
    },
    findTodayUsage() {
      this.pojo.energyType = this.form.energyType;
      this.pojo.regionId = this.form.regionId;
      this.pojo.timeType = this.timeType;
      axios.post("http://localhost:9999/usageTrend/findUsageToday", this.pojo).then(res => {
        this.todayUsage = [];
        this.todayUsage = res.data;
        this.initChart3();
      })
    },
    findWithResults() {
      axios.post("http://localhost:9999/usageWith/findWithResults", this.form).then(res => {
        this.withResults = []
        this.withResults = res.data;
        this.initChart2();
      })
    },
    findWithUsage() {
      axios.post("http://localhost:9999/usageWith/findCurrentUsage", this.form).then(res => {
        this.withUsage = res.data;
      })
    },
    findRingResults() {
      axios.post("http://localhost:9999/usageRing/findRingResults", this.form).then(res => {
        this.ringResults = []
        this.ringResults = res.data;
        this.initChart();
      })
    },
    findCurrentUsage() {
      axios.post("http://localhost:9999/usageRing/findCurrentUsage", this.form).then(res => {
        this.currentUsage = res.data;
      })
    },
    findList() {
      this.showDiv = true;
      this.findRingResults();
      this.findCurrentUsage();
      this.findWithUsage();
      this.findWithResults();
      this.findTodayUsage();
      this.findYesterdayUsage();
      this.findJointList();
      this.initChart();
      this.initChart2();
    },
    findAllRegion() {
      axios.post("http://localhost:9999/region/findAll").then(res => {
        this.region = res.data;
      })
    },
    displayPage() {
      this.showDiv = true;
      this.findList();
    },
    toHead() {
      this.$router.push('/overview')
    },
    initChart() {
      const chartDom = this.$refs.echartsRef;
      const myChart = echarts.init(chartDom);
      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月',],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: '耗能',
            type: 'bar',
            data: this.currentUsage
          },
          {
            name: '环比(%)',
            type: 'line',
            yAxisIndex: 1,
            data: this.ringResults
          }
        ]

      };
      myChart.setOption(option);
    },
    initChart2() {
      const chartDom = this.$refs.echartsRef2;
      const myChart = echarts.init(chartDom);
      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年', '2022年', '2023年', '2024年'],
            axisLabel: {
              interval: 0 // 设置interval为0，表示全部显示
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: '耗能',
            type: 'bar',
            data: this.withUsage
          },
          {
            name: '同比(%)',
            type: 'line',
            yAxisIndex: 1,
            data: this.withResults
          }
        ]
      };
      myChart.setOption(option);
    },
    initChart3() {
      const chartDom = this.$refs.echartsRef3;
      const myChart = echarts.init(chartDom);
      // 配置图表选项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: this.joint,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: '今日',
            type: 'line',
            data: this.todayUsage,
            areaStyle: {
              color: 'rgb(225,241,243)'
            }
          },
          {
            name: '昨日',
            type: 'line',
            yAxisIndex: 1,
            data: this.yesterdayUsage,
            areaStyle: {
              color: 'rgb(220,231,251)'
            }
          }
        ]
      };

      myChart.setOption(option);
    },
  },
  created() {
    this.findAllRegion();
  },
  mounted() {
    this.displayPage();
  }
}
</script>

<style>
#select {
  width: 50px;
  position: absolute;
  top: 120px;
  right: 120px
}

#head {
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 60px;
}

#app {

}
</style>
